<!-- 用户登录 -->
<template>
  <section class="container">
    <div class="logo-wrap">
      <div class="logo-circle">
        <div class="logo-inner">
          <img src="/images/login/icon_company_default.png" />
        </div>
      </div>
    </div>
    <div class="square-text">登录</div>
    <div class="square"></div>
    <div class="form-wrap">
      <van-form @submit="submitForm">
        <div class="account inline">
          <div class="icon"></div>
          <span class="text">用户名</span>
        </div>
        <div class="field">
          <van-field v-model="account"
                     placeholder="您的账号"
                     clearable
                     :rules="[{ required: true, message: '请填写用户名' }]"
                     autocomplete />
        </div>
        <div class="password inline">
          <div class="icon"></div>
          <span class="text">密码</span>
        </div>
        <div class="field">
          <van-field v-model="password"
                     :type="computePasswordType"
                     placeholder="您的密码"
                     clearable
                     :rules="[{ required: true, message: '请填写密码' }]"
                     autocomplete>
            <template #right-icon>
              <span class="solts"
                    @click="isPassword = !isPassword">
                <van-icon name="eye"
                          v-if="isPassword" />
                <van-icon name="closed-eye"
                          v-else />
              </span>
            </template>

          </van-field>
        </div>
        <van-button type="primary"
                    block
                    native-type="submit"
                    color="#3975C6">立即登录</van-button>
      </van-form>
    </div>
  </section>
</template>

<script>
import { reactive, toRefs, computed } from 'vue'
import { Toast } from 'vant'
import md5 from 'js-md5'
import $store from '@/store'
import $router from '@/router'
import { mobileResultCode } from '@/assets/js/common'
import { doLogin } from '@/api/request/basic'


export default {
  setup () {

    // 表单数据
    const form = reactive({
      account: '',
      password: ''
    })

    // 页面状态数据
    const page = reactive({
      // 是否显示密码
      isPassword: true,
    })

    // 计算是否显示密码
    const computePasswordType = computed(() => {
      return page.isPassword ? 'password' : 'text'
    })

    // 表单提交
    const submitForm = () => {
      Toast.loading({
        message: '登录中...',
        forbidClick: true,
        duration: 0
      })
      doLogin({ account: form.account, password: md5(form.password).toUpperCase() })
        .then(response => {
          const responseCode = response.body.code
          const responseItem = response.body.data.item
          // 成功响应
          if (responseCode.indexOf(mobileResultCode.SUCCESS) !== -1) {

            // 未分配权限
            if (responseCode === mobileResultCode.NO_JURISDICTION) {
              Toast.fail({ message: '无访问权限' })
              return false
            }
            // 用户名或密码错误
            if (responseCode === mobileResultCode.NO_DATA) {
              Toast.fail({ message: '用户名或密码错误\n请重新输入' })
              return false
            }
            // 登录成功后，显示成功提示
            Toast.success({ message: '登录成功' })
            // 缓存token 该用户可见模块 用户角色列表
            $store.dispatch('recordUserInfo', {
              token: responseItem.key,
              // currentRole: responseItem.groupName,
              roles: responseItem.userGroups,
              // auths: responseItem.joinCheckModules,
              userName: responseItem.userName,
            })
            $store.dispatch('recordCurrentRoleName', responseItem.groupName)
            $store.dispatch('recordMenus', responseItem.joinCheckModules.reverse())
            // 跳转首页
            $router.push('index')
          } else {
            Toast.fail({ message: response.body.message, duration: 6000 })
          }
        }
        ).catch(error => {
          console.error('用户登录失败，错误信息为：' + error)
          // 未成功响应
          Toast.fail({
            message: '登录失败\n系统内部错误',
          })
        })
    }

    return {
      submitForm,
      computePasswordType,
      ...toRefs(form),
      ...toRefs(page)
    }
  }

}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: #3975c6;
}

.logo-wrap {
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 5px solid #1d5196;
  background: #fff;
}

.logo-inner {
  width: 100%;
  display: flex;
  height: 100%;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.form-wrap {
  height: 70%;
  background: #fff;
  border-radius: 19px 19px 0 0;
  box-sizing: border-box;
}

.square {
  width: 16px;
  height: 16px;
  background: white;
  position: absolute;
  transform: rotate(45deg);
  top: calc(30vh - 8px);
  left: 57px;
}
.square-text {
  position: absolute;
  color: #fff;
  font-size: 16px;
  top: calc(30vh - 38px);
  left: 48px;
}

.form-wrap {
  padding: 30px;
}
.icon {
  width: 15px;
  height: 15px;
  margin-right: 7px;
  background-size: cover;
  background-repeat: no-repeat;
}
.account > div:nth-child(1) {
  background-image: url(../images/login/icon_account.png);
}
.password > div:nth-child(1) {
  background-image: url(../images/login/icon_password.png);
}

.text {
  color: #666;
  font-size: 14px;
}

::v-deep(.van-field__value) {
  border-bottom: 1px solid #ccc;
  overflow: visible;
}

@media (-webkit-min-device-pixel-ratio: 2) {
  ::v-deep(.van-field__value) {
    border-bottom: 0.5px solid #ccc;
    overflow: visible;
  }
}
.field {
  margin-bottom: 20px;
}
</style>